<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {padding: 0;margin: 0;}
        ul { list-style-type: none;}

        .parentWrap {
            width: 200px;
            margin: 100px auto;
            text-align:center;

        }

        .menuGroup {
            border:1px solid #999;
            background-color:#e0ecff;
        }

        .groupTitle {
            display:block;
            height:20px;
            line-height:20px;
            font-size: 16px;
            border-bottom:1px solid #ccc;
            cursor:pointer;
        }

        .menuGroup > div {
            height: 200px;
            background-color:#fff;
            display:none;
        }

    </style>
    <script src="./jquery-1.12.2.js"></script>
          
    <script>
        // 1. 给所有的span绑定单击事件-->
        // 2. 让当前这个元素的下一个div展示出来-->
        // 3. 让当前这个元素的父元素的兄弟元素的子元素隐藏掉
        $(document).ready(function(){
            $(".groupTitle").click(function(){
                // next() 作用：获取指定元素的下一个元素
                if($(this).next("div").css("display") == "none"){
                    $(this).next("div").show();
                    // parent() 作用：获取指定元素的父元素
                    $(this).parent("li").siblings("li").children("div").hide();
                }else{
                    $(this).next("div").hide();
                }

            });
        })
    </script>
</head>
<body>
<ul class="parentWrap">
    <li class="menuGroup">
        <span class="groupTitle">我的心水</span>
        <div>
            <ul>
                <li><a href="http://www.taobao.com">可爱淘</a></li>
                <li><a href="http://www.taobao.com">韩都衣舍</a></li>
                <li><a href="http://www.taobao.com">棉立方</a></li>
                <li><a href="http://www.taobao.com">妖精的口袋</a></li>
            </ul>
        </div>
    </li>
    <li class="menuGroup">
        <span class="groupTitle">土豪们</span>
        <div>
            <ul>
                <li><a href="http://www.baidu.com">兰博基尼</a></li>
                <li><a href="http://www.baidu.com">布加迪</a></li>
                <li><a href="http://www.baidu.com">法拉利斯</a></li>
                <li><a href="http://www.baidu.com">劳斯莱斯</a></li>
            </ul>
        </div>
    </li>
    <li class="menuGroup">
        <span class="groupTitle">程序猿</span>
        <div>
            <ul>
                <li><a href="http://www.jd/com">Tom</a></li>
                <li><a href="http://www.jd/com">Jerry</a></li>
                <li><a href="http://www.jd/com">nll</a></li>
                <li><a href="http://www.jd/com">fj</a></li>
            </ul>
        </div>
    </li>
    <li class="menuGroup">
        <span class="groupTitle">美工妹子</span>
        <div>
            <ul>
                <li><a href="https://github.com">罗丝</a></li>
                <li><a href="https://github.com">冰冰</a></li>
                <li><a href="https://github.com">朱迪</a></li>
                <li><a href="https://github.com">莫文蔚</a></li>
            </ul>
        </div>
    </li>
</ul>
</body>
</html>